<template>
	<view class="address u-skeleton">
		<u-navbar title="新增地址" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="box u-skeleton-rect">
			<view class="item">
				<view class="tips">收货人</view>
				<input type="text" placeholder="请输入收货人" v-model="from.name">
			</view>
			<view class="item">
				<view class="tips">手机号</view>
				<input type="text" placeholder="请输入手机号" v-model="from.mobile">
			</view>
			<view class="item">
				<view class="tips">地区</view>
				<view class="right">
					<AddressPicker @change="change" :level="3" class="picker">
						<block v-if="planLocate">
							{{planLocate}}
						</block>
					</AddressPicker>
					<u-icon name="arrow-right" color="#999999" size="26" style="margin-top: 4rpx;"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="tips">详细地址</view>
				<input type="text" placeholder="请输入详细地址" v-model="from.detail">
			</view>
			<view class="item hover">
				<view class="tips">设为默认地址</view>
				<u-switch v-model="checked" size='40' active-color="#292929"></u-switch>
			</view>
		</view>
		<u-button class="btn-primary u-skeleton-rect" @click="createAddress" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">保存收货地址</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF" ></u-skeleton>
	</view>
</template>
<script>
	import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		components:{AddressPicker},
		data(){
			return {
				loding:false,
				planLocate:'请选择地区',
				checked:false,//是否选中
				//需要上传的数据
				from:{
					name:'', //姓名
					mobile:'', //电话
					province:'', //省
					city:'', //市
					district:'', //区
					detail:'' ,//详细地址
					is_default:1, //是否选择为默认
				}
			}
		},
		onLoad(option) {
			if(option.str) {
				this.from = JSON.parse(option.str);
				this.checked = this.from.is_default == 2 ? true : false ;
				this.planLocate = this.from.province + this.from.city + this.from.district;
			}
		},
		onShow() {},
		methods:{
			//选择地址
			change(e){
				const obj = {
					province:e.data[0].name, //省
					city:e.data[1].name, //市
					district:e.data[2].name, //区
				}
				this.planLocate = '';
				e.data.forEach((item)=>{
					this.planLocate += item.name
				})
				this.from = {
					...this.from,
					...obj
				}
			},
			//创建地址
			createAddress() {
				this.from.is_default = this.checked ? 2 : 1;
				this.$http.asyncSendrequest({
					url:'/profile/saveAddress',
					data:this.from,
					success:res=>{
						if(res.code == '0') {
							this.$util.taost({
								title:res.msg,
								callback:res=>{
									uni.navigateBack({
										delta:1
									})
								}
							})
						}else{
							this.$util.taost({
								title:res.msg,
							})
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		margin: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.item{
			display: flex;
			align-items: center;
			height: 110rpx;
			border-bottom: 2rpx solid #EBEBEB;
			.tips{
				min-width: 120rpx;
				margin-right: 60rpx;
			}
			input{
				font-size: 28rpx;
			}
		}
		.hover{
			border: none;
			justify-content: space-between;
			margin-right: 60rpx;
		}
		.right{
			width: calc(100% - 180rpx);
			display: flex;
			align-items: center;
			justify-content: right;
			position: relative;
			.picker{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.r-tips{
				font-size: 28rpx;
				color: #999999;
			}

		}
	}
	.btn-primary {
		height: 96rpx;
		background: #292929;
		border-radius: 10rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		margin-top: 116rpx;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		width: calc(100% - 60rpx);
	}
</style>